import 'package:flutter/material.dart';

class WalletPage extends StatelessWidget {

	WalletPage({Key key}) : super(key: key);

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('Wallet'),
			),
			body: Container(
				color: Colors.grey[300],
				child: CustomScrollView(
					slivers: <Widget>[
						SliverGrid.count(
							crossAxisCount: 3,
							children: <Widget>[
								Container(
									color: Colors.blue,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off, color: Colors.white,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.white,
												),
											)
										],
									),
								),
								Container(
									color: Colors.blue,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off, color: Colors.white,),
											Text(
												'Balance', 
												style: TextStyle(
													color: Colors.white,
												),
											),
											Text(
												'¥13000',
												style: TextStyle(
													color: Colors.grey
												),
											)
										],
									),
								),
								Container(
									color: Colors.blue,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.card_giftcard, color: Colors.white,),
											Text(
												'Cards', 
												style: TextStyle(
													color: Colors.white,
												),
											)
										],
									),
								),
							],
						),
						SliverGrid.count(
							crossAxisCount: 1,
							childAspectRatio: 8.0,
							children: <Widget>[
								Container(
									color: Colors.white,
									margin: EdgeInsets.only(top: 8.0),
									padding: EdgeInsets.all(8.0),
									child: Text('Powered by Tencent'),
								)
							],
						),
						SliverGrid.count(
							crossAxisCount: 3,
							crossAxisSpacing: 1.0, // 纵向分割线
							mainAxisSpacing: 1.0,  // 横向分割线
							children: <Widget>[
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
										],
									),
								),
							],
						),
						SliverGrid.count(
							crossAxisCount: 1,
							childAspectRatio: 8.0, // 设置高度宽度比
							children: <Widget>[
								Container(
									color: Colors.white,
									margin: EdgeInsets.only(top: 8.0),
									padding: EdgeInsets.all(8.0),
									child: Text('Limited time promotion'),
								)
							],
						),
						SliverGrid.count(
							crossAxisCount: 3,
							crossAxisSpacing: 1.0, // 纵向分割线
							mainAxisSpacing: 1.0,  // 横向分割线
							children: <Widget>[
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
										],
									),
								),
							],
						),
						SliverGrid.count(
							crossAxisCount: 1,
							childAspectRatio: 8.0, // 设置高度宽度比
							children: <Widget>[
								Container(
									color: Colors.white,
									margin: EdgeInsets.only(top: 8.0),
									padding: EdgeInsets.all(8.0),
									child: Text('Powered by third-party operator'),
								)
							],
						),
						SliverGrid.count(
							crossAxisCount: 3,
							crossAxisSpacing: 1.0, // 纵向分割线
							mainAxisSpacing: 1.0,  // 横向分割线
							children: <Widget>[
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
								Container(
									color: Colors.white,
									padding: EdgeInsets.all(32.0),
									child:  Column(
										children: <Widget>[
											Icon(Icons.money_off,),
											Text(
												'Money', 
												style: TextStyle(
													color: Colors.black,
												),
											)
										],
									),
								),
							],
						),
					],
				),
			)
		);
	}
}